<template>
    <!-- 组件中只有一个弹窗 -->
<el-dialog
        v-model="projectEditWinDialogVisible"
        title="编辑项目"
        width="50%"
        @close="handleClose"
>
    <template #default>
        <el-form :model="editProject" label-width="auto">
            <el-form-item for="projectId" label="项目编号">
                <el-input id="projectId" readonly v-model="editProject.projectId"/>
            </el-form-item>
            <el-form-item for="projectName" label="项目名称">
                <el-input id="projectName" v-model="editProject.projectName"/>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item for="startTime" label="开始时间">
                        <el-date-picker
                            id="startTime"
                            v-model="editProject.startTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item for="endTime" label="结束时间">
                        <el-date-picker
                            id="endTime"
                            v-model="editProject.endTime"
                            type="date"
                            value-format="YYYY-MM-DD"
                        />
                    </el-form-item>
                </el-col>
            </el-row>


            <el-form-item for="projectDesc" label="项目描述">
                <!-- 富文本编辑器的结构 -->
                <div style="border: 1px solid #ccc">
                    <Toolbar
                        style="border-bottom: 1px solid #ccc"
                        :editor="editorRef"
                        :defaultConfig="toolbarConfig"
                    />
                    <Editor
                        id="projectDesc"
                        style="height: 500px; overflow-y: hidden;"
                        v-model="valueHtml"
                        :defaultConfig="editorConfig"
                        @onCreated="handleCreated"
                    />
                </div>
            </el-form-item>
            <el-form-item for="projectStatus" label="项目状态">
                <el-radio-group id="projectStatus" v-model="editProject.projectStatus">
                    <el-radio :value="1" label="草稿"/>
                    <el-radio :value="2" label="发布"/>
                    <el-radio :value="3" label="归档"/>
                    <el-radio :value="4" label="暂停"/>
                    <el-radio :value="5" label="意外"/>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </template>
    <template #footer>
        <div class="dialog-footer">
            <el-button @click="cancelEditProject">取消</el-button>
            <el-button type="primary" @click="editProjectSubmit">
                提交
            </el-button>
        </div>
    </template>
</el-dialog>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef,watch} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import projectRequest from "@/api/project.js";
import {ElMessage} from "element-plus";
// 申明这个组件的属性  projectId
const props = defineProps(['projectId']);
// 申明这个组件的事件  editComplete
const emits = defineEmits(['editComplete','cancelEdit'])
// 弹窗标记
let projectEditWinDialogVisible = ref(false);
// 编辑的项目对象
let editProject = ref({})
// 富文本编辑器相关的属性
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML ，如果我们修改了内容，这里会跟着变化
const valueHtml = ref('');
// 工具栏配置
const toolbarConfig = {}
// 编辑器配置
const editorConfig = { placeholder: '请输入项目描述...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

/**
 * 取消编辑按钮事件
 */
function cancelEditProject(){
    editProject = ref({});
    projectEditWinDialogVisible.value = false;
    emits("cancelEdit")
}

/**
 * 关闭窗体前的回调函数
 */
function handleClose(){
    emits("cancelEdit")
}

/**
 * 编辑提交
 */
function editProjectSubmit(){
    editProject.value.projectDesc = valueHtml.value;
    projectRequest.updateProjectById(editProject.value,res=>{
        if(res.code == 200){
            ElMessage({
                type:"success",
                message:"编辑成功"
            });
            // 关闭弹窗
            cancelEditProject();
            // 触发编辑完成的事件
            emits('editComplete');
        }else{
            ElMessage({
                type:"warning",
                message:"项目添加失败"
            });
        }
    })
}

/**
 * 根据id加载项目信息
 */
function loadProjectById(){
    projectRequest.getProjectById(props.projectId,res=>{
        if(res.data){
            // 确实加载到要编辑的数据了
            editProject.value = res.data;
            valueHtml.value = res.data.projectDesc;
            // 显示弹窗
            projectEditWinDialogVisible.value = true;
        }
    });
}

/**
 * 侦听器 侦听 props.projectId
 */
watch(()=>props.projectId,()=>{
    // 当props中的projectId发生变化的时候，我们就重新加载数据
    console.log("watch:" + props.projectId)
    if(props.projectId && props.projectId != -1){
        loadProjectById();
    }
});
</script>
<style scoped>

</style>